<template>
  <div class="download">
    <div v-if="!isMobile">
      <!-- 背景图片 -->
      <div class="back">
        <div>
          <h1>Swellpro Download Center</h1>
        </div>
      </div>

      <!-- 视频内容 -->
      <div class="container">
        <div class="left">
          <p v-for="(item, index) in download" :key="index" :class="['left-item', { 'left-item__active': index === activeIndex }]" @click="() => activeIndex = index">{{item}}</p>
        </div>

        <div class="right" v-for="(item, index) in downloads" :key="index" v-show="activeIndex === index">
            <div class="video-item" v-for="(file, index) in item.files.rows" :key="'single' + index" >
              <a :href="file.url" target="_blank">
                <i :class="['iconfont', 'icon', types[Number(file.type_id) - 1]]"></i>

                <p class="name">{{file.name}}</p>

                <p class="time">{{file.updated_at | timeFilter}}</p>
              </a>
            </div>
        </div>

      </div>

    </div>
  </div>
</template>

<script>
import Http from '~/plugins/http'
import dayjs from 'dayjs'
export default {
  data () {
    return {
      isMobile: this.$isMobile,
      activeIndex: 0,
      download: ['Splash Drone', 'Spry Drone'],
      types: [
        'icon-ruanjian',
        'icon-shuomingshu',
        'icon-caozuoshuoming'
      ], // 下载文件类型
    };
  },

  head() {
    return {
        title: '',
        meta: [
            { hid: 'description', name: 'description', content: ''},
        ]
    }
  },

  async asyncData() {
      const {
          http,
          api: { downloads }
      } = Http

      let titles = ['Splash Drone', 'Spry Drone'];

      const res = await Promise.all(titles.map((title) => http.request(downloads, null, { product_name : title })))

      let flag = [];
      if (res) {
        flag = res.map((pos, index) => {
          const { data: { result } } = pos;

          if (result) {
            return {
              name : titles[index],
              files: result
            }
          }
        })
      }

      return { downloads: flag }
  },

  filters: {
    timeFilter(time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss');
    }
  },

  components: {},

  computed: {},

  mounted() {
  },

  methods: {
  }
}

</script>
<style lang='stylus' scoped>
.download
  >div
    background #f8f8f8
    .back
      background-image url('https://cdn.swellpro.com/dealer/9Y5A1127.png')
      background-position center
      background-repeat no-repeat
      background-size cover
      width 100%
      height 250px
      display flex
      justify-content center
      align-items center
      position relative
      >div
        position absolute
        left 0
        top 0
        width 100%
        height 100%
        color #fff
        background rgba(0,0,0,.2)
        display flex
        justify-content center
        align-items center
        h1
          text-align center
          font-size 30px
          font-weight 300
          margin-bottom 30px
    .container
      display flex
      flex-flow row wrap
      padding 30px 0
      width 1000px
      .left
        flex 0 0 15%
        border-right 1px solid rgba(0,0,0,.3)
        box-sizing border-box
        &-item
          font-size 13px
          padding-bottom 40px
          font-weight 400
          cursor pointer
          color rgba(0,0,0,.3)
          transtion all .3s
        .left-item__active
          color #000
          font-size 14px
      .right
        flex 0 0 85%
        display flex
        box-sizing border-box
        padding-left 15px
        flex-flow row wrap
        .video-item
          box-sizing border-box
          padding-right 20px
          flex 0 0 33.3333%
          width 100%
          padding-top 20px
          display flex
          justify-content center
          align-items center
          >a
            display block
            font-size 14px
            text-align center
            cursor pointer
            color #000
            .icon
              font-size 50px
              display inherit
            .icon-shuomingshu
              color #e69837
            .icon-ruanjian
              color #1296db
            .icon-caozuoshuoming
              color #9fbf53
            .name
              margin 15px 0 10px
            .time
              margin-bottom 20px
            &:hover
              color #f26444
</style>